/* eslint-disable handle-callback-err */
<template>
  <div>
    <!-- accept=".docx, .xlsx, .pptx, .ppt, .doc, .xls" -->
    <el-dialog
      title="上传文件"
      :visible.sync="uploadingdata.uploadings"
      class="mini"
      append-to-body
    >
      <el-upload
        ref="upload"
        class="my-upload"
        drag
        action="string"
        :file-list="fileList"
        :auto-upload="false"
        :on-remove="remove"
        :on-change="handleChange"
        :multiple="true"
        :http-request="httpRequest"
        accept=".docx, .xlsx, .pptx, .ppt, .doc, .xls, .jpg, .jpeg, .png, .pdf"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <el-button
        v-if="this.fileList.length != 0"
        class="button"
        size="small"
        type="primary"
        @click="submitUpload"
        >上传到服务器</el-button
      >
      <el-dialog class="mini" :visible.sync="innerVisible" append-to-body>
        文件正在上传
        <el-progress :percentage="percentage"></el-progress>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'
import { listFolder } from '@/api/fd/folder'
var that = null
export default {
  name: 'AddFile',
  props: ['uploadingdata'],
  data() {
    return {
      user: {},
      fileList: [],
      multiple: true,
      fileData: '',
      theme: '',
      repositoryId: '',
      folderId: '',
      uid: '',
      showFile: true,
      innerVisible: false,
      percentage: 12,
      time: ''
    }
  },
  mounted() {
    this.parameter()
    //
    that = this
    let user = window.localStorage.getItem('access-user')
    if (user) {
      user = JSON.parse(user)
      this.user = user
    }
  },
  methods: {
    httpRequest(param) {
      this.fileList.push(param.file)
    },
    // 文件上传参数
    parameter() {
      this.repositoryId = this.$route.query.repositoryId
      if (this.$route.query.folderId === null) {
        this.folderId = 0
      } else {
        this.folderId = this.$route.query.folderId
      }
    },
    handleChange(file, fileList) {
      // // 限制文件类型
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['docx', 'xlsx', 'pptx', 'ppt', 'doc', 'xls', 'pdf']
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$refs.upload.uploadFiles = this.$refs.upload.uploadFiles.filter(
          (e) => {
            if (e.uid != file.uid) {
              return true
            }
          }
        )
        this.$message.warning(
          '上传文件只能是 docx、xlsx、pptx、ppt、doc、xls、pdf格式'
        )
        return
      }
      this.fileList.push(file)
    },
    //计时器
    start() {
      this.time = setInterval(() => {
        if (this.percentage < 98) {
          this.percentage++
        } else {
          this.percentage = 98
        }
      }, 1000)
      this.$forceUpdate()
    },
    clearTime(time) {
      //清除定时器
      clearInterval(time)
    },
    submitUpload(form) {
      this.uploadingdata.uploadings = false
      this.innerVisible = true
      this.start()
      const formData = new FormData()
      // formData.append('file', file.raw)
      formData.append('repositoryId', this.uploadingdata.repositoryId)
      formData.append('folderId', this.uploadingdata.folderId || 0)
      this.fileList.forEach((file) => {
        formData.append('file', file.raw)
      })
      this.uploadDocument(formData)
    },
    uploadDocument(formData) {
      axios({
        url: process.env.VUE_APP_BASE_API + '/api/fd/document/upload',
        method: 'post',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data;charset=utf-8',
          Authorization: getToken()
        }
      })
        .then((res) => {
          if (res.data.code === 1) {
            this.percentage = 100
            this.clearTime()
            this.innerVisible = false
            this.$message.success('上传成功')
            this.fileList = []
            this.$refs.upload.clearFiles()
            this.$parent.getList()
            this.$emit('uploadRes', res)
          } else {
            this.$message.error('上传失败')
            this.percentage = 12
            this.clearTime()
            this.innerVisible = false
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },
    remove(file, fileLis) {
      const arr = []
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].uid !== file.uid) {
          arr.push(this.fileList[i])
        }
      }
      this.fileList = arr
    }
  }
}
</script>

<style scoped lang='scss'>
.man-container {
  margin: 0px;
  overflow: hidden;
  bottom: 0px;
  right: 0px;
  width: 100%;
  padding: 50px 20px 0px 20px;
}
.my-upload {
  text-align: center;
  >>> .el-upload-list__item-name {
    text-align: left;
  }
  .el-upload-dragger {
    width: 20px !important;
  }
}

.el-card {
  text-align: start;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
  border: 1px solid #ddd;
  width: 98%;
}

.el-card__header {
  border-bottom: 1px solid #ddd;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.mini .el-dialog {
  width: 25%;
}
</style>

